<script setup>
import { ref ,onMounted } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
onMounted(()=>{
    init()
    initHightLight()
})
//根据路由设置高亮
const initHightLight=()=>{
    let str=''
    if(route.path=='/office/display/history'){
        str='.history'
    }
    else if(route.path=='/office/display/await'){
        str='.await'
    }
    else if(route.path=='/office/display/revoke'){
        str='.revoke'
    }
    else{
        str='.finish'
    }
    const element=document.querySelector(str)
        element.classList.toggle('active');
        element.setAttribute("style","color: #008CBA;")
}

//添加事件
const init = ()=>{
    const elementList = document.getElementsByClassName('my-button')
    for (let i = 0; i < elementList.length; i++) {  
        const element = elementList[i]; 
        if (element) {  
            // 添加mouseenter事件监听器  
            element.addEventListener('click', function(event) {  
                // 在这里执行你希望在鼠标悬停时运行的代码 
                //添加active类
                this.classList.toggle('active');
                element.setAttribute("style","color: var(--el-color-primary);")
                for(let j=0;j<elementList.length;j++){
                    if(i !=j ){
                        elementList[j].classList.remove('active')
                        elementList[j].setAttribute("style","color: var(--el-text-color-primary);")
                    }
                }
            });  
        }
    }
}
</script>
<template>
    <div class="content">
        <div class="head">
            <table style="width: 100%;height: 60px;">
                <tr class="my-tr">
                    <td>
                        <button class="my-button history" @click="$router.push('/office/display/history')">历史稿件</button>
                    </td>
                    <td>
                        <button class="my-button await" @click="$router.push('/office/display/await')">待处理</button>
                    </td>
                    <td>
                        <button class="my-button finish" @click="$router.push('/office/display/finish')">已处理</button>
                    </td><td>
                        <button class="my-button revoke" @click="$router.push('/office/display/revoke')">已撤销</button>
                    </td>
                </tr>
            </table>
            <div style="background-color:rgb(0, 0, 0,0.1) ;height: 1px;margin-bottom: 10px;"></div>
        </div>
        <div style="width: 80%;margin: 72px auto 0;">
            <div>
                <router-view></router-view>
            </div>
        </div>
    </div>
    
</template>

<style scoped>
.head{
    position: fixed;
    width: 80%;
    background-color: white;
}
.content{
    width: 80%;
    margin:3% auto;
    min-height: 90vh;
    overflow: hidden;
    overflow-y: auto;
    background-color:#fff;
    box-shadow: 0 0 10px 1px rgb(0,0,0,0.1);
    border-radius: 10px;
}
.my-tr td{
    width: calc(100% / 4);
    text-align: center;
    font-size: 18px;
}

.my-button {
    position: relative;
    padding: 10px 10px;
    background-color: white;
    color: var(--el-text-color-primary);
    border: none;
    cursor: pointer;
}

.my-button::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: var(--el-color-primary);
    transition: width 0.5s ease;
}

.my-button.active::after {
    width: 100%;
}
</style>